<script setup>
import {onMounted, ref} from "vue";
import {bindRoleApi, bindRoleView, createRole, deleteRole, listRole, updateRole} from "../../../http/manage/role.js";
import {manageStore} from "../../../stores/counter.js";
import {listViewTree} from "../../../http/manage/view.js";
import {listApi} from "../../../http/manage/api.js";
import {listApiGroupDetailsTree, listApiGroupTree} from "../../../http/manage/apiGroup.js";

const viewTreeFormProps = {
  children: 'children',
  label: 'name',
}
const apiTreeFormProps = {
  children: 'children',
  label: 'name',
}

const viewTreeRef = ref()
const apiTreeRef = ref()

let currentRole = ref({})
let roleTableData = ref([])
let roleViewTreeData = ref([])
let roleApiTreeData = ref([])

let roleName = ref("")
let roleForm = ref({})
let showRoleForm = ref(false)
let roleUpdate = ref(false)

let showRoleViewForm = ref(false)
let roleViewForm = ref([])

let showRoleApiForm = ref(false)
let roleApiForm = ref([])

function showRoleCreate() {
  showRoleForm.value = true
  roleUpdate.value = false
}

function showRoleUpdate(role) {
  roleForm.value = role
  showRoleForm.value = true
  roleUpdate.value = true
}

function handleRoleCreate() {
  createRole(roleForm.value).then(response => {
    handleRoleList()
    showRoleForm.value = false
    roleForm.value = {}
  })
}

function handleRoleUpdate() {
  updateRole(roleForm.value).then(response => {
    handleRoleList()
    showRoleForm.value = false
    roleForm.value = {}
  })
}

function handleRoleSave() {
  if (roleUpdate.value) {
    handleRoleUpdate()
  } else {
    handleRoleCreate()
  }
}

function handleRoleDelete(role) {
  deleteRole(role.ukId).then(response => {
    roleTableData.value = response.data
    handleRoleList()
  })
}

function handleRoleList() {
  listRole(roleName.value).then(response => {
    roleTableData.value = response.data
  })
}

function handleViewTreeList() {
  listViewTree(0).then(response => {
    roleViewTreeData.value = response.data
  })
}

function showRoleViewBind(role) {
  currentRole.value = role
  showRoleViewForm.value = true
  handleViewTreeList()
}

function handleSetCheckedKeys(viewUkIdList) {
  let checkedKeys = [];
  for (let i = 0; i < viewUkIdList.length; i++) {
    let node = viewTreeRef.value.getNode(viewUkIdList[i])
    if (node.data.children.length === 0) {
      checkedKeys.push(viewUkIdList[i])
    }
  }
  viewTreeRef.value.setCheckedKeys(checkedKeys, true);
}

function handleRoleViewBind() {
  let halfCheckedKeys = viewTreeRef.value.getHalfCheckedKeys();
  let checkedKeys = viewTreeRef.value.getCheckedKeys();
  let keys = checkedKeys.concat(halfCheckedKeys);
  bindRoleView(currentRole.value.ukId, keys).then(response => {
    showRoleViewForm.value = false
    handleRoleList()
  })
}

function handleApiGroupDetailsTreeList() {
  listApiGroupDetailsTree(0).then(response => {
    roleApiTreeData.value = response.data
  })
}

function showRoleApiBind(role) {
  currentRole.value = role
  showRoleApiForm.value = true
  handleApiGroupDetailsTreeList()
}

function handleRoleApiBind() {
  bindRoleApi(currentRole.value.ukId, apiTreeRef.value.getCheckedKeys()).then(response => {
    showRoleApiForm.value = false
    currentRole.value = {}
    handleRoleList()
  })
}

onMounted(() => {
  handleRoleList()
})

</script>

<template>
  <div style="display: flex; flex-flow: column nowrap; width: 100%; height: 100%; overflow: hidden; padding-left: 5px; padding-right: 5px">
    <div style="display: flex; flex-flow: row nowrap; align-items: center; height: 40px; padding-left: 5px">
      <el-form :inline="true" style="height: 30px">
        <el-form-item label="名称">
          <el-input style="width: 200px" v-model="roleName" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleRoleList">查询</el-button>
          <el-button type="primary" @click="showRoleCreate({})">新建</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="display: flex; width: 100%; height: 100%; overflow: auto;">
      <el-table
          highlight-current-row
          :data="roleTableData" border style="width: 100%;">
        <el-table-column prop="name" label="名称" min-width="100"/>
        <el-table-column prop="description" label="说明" min-width="100"/>
        <el-table-column prop="status" label="状态" width="70">
          <template #default="scope">
            <el-switch
                @change="roleForm = scope.row; handleRoleUpdate()"
                active-value="enable"
                inactive-value="disable"
                v-model="scope.row.status "
            />
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="60"/>
        <el-table-column label="操作" width="380">
          <template #default="scope">
            <el-button @click="showRoleUpdate(scope.row)">
              编辑
            </el-button>
            <el-button @click="showRoleViewBind(scope.row)">
              视图权限
            </el-button>
            <el-button @click="showRoleApiBind(scope.row)">
              接口权限
            </el-button>
            <el-popconfirm
                width="170"
                hide-icon
                confirm-button-text="确定"
                cancel-button-text="取消"
                @confirm="handleRoleDelete(scope.row)"
                :title="'是否确认删除角色数据 [ ' + scope.row.name + ' ] ？'">
              <template #reference>
                <el-button type="danger">
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

  <el-dialog title="角色管理" v-model="showRoleForm" :close-on-click-modal="false" label-width="80px">
    <el-form ref="form" :model="roleForm" label-width="80px">
      <el-form-item label="角色名称">
        <el-input v-model="roleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="角色说明">
        <el-input v-model="roleForm.description"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="roleForm.status">
          <el-option
              v-for="item in manageStore().status"
              :key="item.value"
              :label="item.name"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="roleForm.sort" type="number" min="0" max="90000"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="showRoleForm = false; currentRole.value = {}; roleForm.value = {}">取消</el-button>
        <el-button type="primary" @click="handleRoleSave">保存</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <el-dialog title="角色视图权限"
             @opened="handleSetCheckedKeys(currentRole.viewUkIdList)"
             @closed="viewTreeRef.setCheckedKeys([], true)"
             v-model="showRoleViewForm"
             :close-on-click-modal="false"
             label-width="80px">
    <el-tree
        ref="viewTreeRef"
        show-checkbox
        default-expand-all
        node-key="ukId"
        :props="viewTreeFormProps"
        :data="roleViewTreeData"
    >
    </el-tree>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="showRoleViewForm = false; currentRole.value = {}">取消</el-button>
        <el-button type="primary" @click="handleRoleViewBind">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog title="角色接口权限"
             @opened="apiTreeRef.setCheckedKeys(currentRole.apiUkIdList, true)"
             @closed="apiTreeRef.setCheckedKeys([], true)"
             v-model="showRoleApiForm"
             :close-on-click-modal="false"
             label-width="80px">
    <el-tree
        ref="apiTreeRef"
        show-checkbox
        default-expand-all
        node-key="ukId"
        :props="apiTreeFormProps"
        :data="roleApiTreeData"
    >
    </el-tree>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="showRoleApiForm = false">取消</el-button>
        <el-button type="primary" @click="handleRoleApiBind">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped>

</style>